<template>
  <!-- 关联方式 -->
  <div id="type-container" v-if="itemData && itemData.data">
    <div class="mode-content">
      <el-select
        v-model="selectedTypeLabel"
        placeholder=""
        @change="changeSelection"
        ref="select"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <img :src="item.label" class="imgSize" />
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    itemData: Object,
    tableData: Array,
  },
  data() {
    return {
      svgImg: this.$svgImg,
      selectedType: "",
      selectedTypeLabel: "",
      typeOptions: [
        //     {
        //       label: require("../../../assets/imgs/left-join.png"),
        //       value: "left",
        //     },
        //     {
        //       label: require("../../../assets/imgs/inner-join.png"),
        //       value: "inner",
        //     },
      ],
    };
  },
  mounted() {
    this.changeSelection("inner");
  },
  methods: {
    changeSelection(e) {
      this.itemData.selectedTypeLabel = this.$lodash.clone(
        this.selectedTypeLabel
      );
      this.selectedTypeLabel = "";
      this.itemData;
      for (let index in this.typeOptions) {
        let obj = this.typeOptions[index];
        if (obj.value == e) {
          console.log("ffff");
          this.$refs["select"].$el.children[0].children[0].setAttribute(
            "style",
            "background:url(" +
              obj.label +
              ") no-repeat;color:#fff;text-indent: -9999px;background-position: 18% center;background-size:contain;background-size:43%"
          );
        }
      }
    },
  },
  watch: {
    tableData: {
      handler(e) {
        // console.log(e);
        console.log("watch");
        if (this.itemData.selectedTypeLabel) {
          this.changeSelection(this.itemData.selectedTypeLabel);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.mode-content {
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0;
  height: 30px;
  width: 9.5%;
  top: -4px;
}

.type-switch {
  position: absolute;
  width: 100%;
  height: 55px;
  border: 1px solid #ddd;
  z-index: 9999;
  top: 33px;
  background-color: #fff;
}
.type-switch .switch-icon-left {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0px;
}
.type-switch .switch-icon-inner {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0px;
  bottom: 0px;
}
.imgSize {
  width: 30px;
}
</style>
<style >
.switch-icon-color > svg {
  font-size: 15px;
  width: 24px;
  height: 30px;
  fill: #09c;
}

#type-container .el-input.el-input--suffix:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 1px;
  background-color: #ccc;
  left: -20px;
  top: 19px;
}
</style>
